<template>
  <q-layout view="hHh lpr lFf">
    <q-header class="bg-grey-3 text-black font-MontserratRegular">
      <q-toolbar :inset="false">
        <q-btn
          class="q-pa-md navbar-menu-btn"
          flat
          dense
          icon="menu"
          aria-label="Menu"
          @click="leftDrawerOpen = !leftDrawerOpen"
        />

        <q-toolbar-title class="cursor-pointer">
          Best Seller
        </q-toolbar-title>

        <q-space> </q-space>

        <HomeNavBarList
          :inDrawer="false"
          :list="navListData"
          direction="horizontal"
        />
      </q-toolbar>
    </q-header>

    <q-drawer v-model="leftDrawerOpen" overlay elevated>
      <HomeNavBarList
        :inDrawer="true"
        :list="navListData"
        direction="vertical"
      />
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script lang="ts">
import HomeNavBarList from 'components/HomeNavBarList.vue';

const linksData = [
  {
    title: 'Home',
    icon: null,
    link: 'home'
  },
  {
    title: 'Product',
    icon: null,
    link: 'product'
  },
  {
    title: 'VIP Club',
    icon: null,
    link: 'club'
  },
  {
    title: 'Contact',
    icon: null,
    link: 'contact'
  }
];

import { defineComponent, ref } from '@vue/composition-api';

export default defineComponent({
  name: 'MainLayout',
  components: { HomeNavBarList },
  data() {
    return {};
  },
  setup() {
    const leftDrawerOpen = ref(false);
    const navListData = ref(linksData);
    return { leftDrawerOpen, navListData };
  }
});
</script>
<style lang="sass">
.navbar-menu-btn
  display: none

@media (max-width: $breakpoint-xs-max )
  .navbar-list-container
    display: none
  .navbar-menu-btn
    display: block
</style>
